<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boss {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="boss">
        <p>问题：<span></span></p>
        <button class="stay">开始</button>
        <button class="end">结束</button>
    </div>
    <script>
        const arr = ['11', '22', '33', '44', '55'];
        console.log(arr);
        //随机问题
        //1.设置开始点击事件，
        //2.定时器让问题随机显示
        //3.设置结束事件，
        //4.停止定时器让问题停止
        //设置随机数，
        //根据下标拿到问题，
        //显示出来，
        //定时器让问题随机显示
        const stay = document.querySelector('.stay');
        const span = document.querySelector('span');
        let setIn;
        stay.addEventListener('click', function () {
            if (setIn) {
                clearInterval(setIn);
            }
            setIn = setInterval(function () {
                let random1 = Math.floor(Math.random() * arr.length);//取值为0-4
                span.innerHTML = `${arr[random1]}`;
            }, 500)
        })
        //end按钮
        //设置点击事件
        //点击停止定时器，
        // 拿到当前停止的题目，下标
        //删除当前显示的问题在数组
        const end = document.querySelector('.end');
        console.log(end);
        let button = document.querySelectorAll('button');

        end.addEventListener('click', function () {
            //清除定时器
            clearInterval(setIn);
            console.log(111);
            // 拿到显示的题目
            let ti = span.innerHTML;
            console.log(ti);
            // 拿到数据所在数组中的下标
            let num = arr.indexOf(ti);
            console.log(num);
            // 删除显示过的题目
            arr.splice(num, 1);
            console.log(arr.length);
            // 当数组中的数据删完，按钮要禁用
            if (arr.length === 0) {
                for (let i = 0; i < button.length; i++) {
                    button[i].disabled = true;
                }
            }
        })
    </script>
</body>

</html>